<%--
  Created by IntelliJ IDEA.
  User: 86188
  Date: 2020/5/30
  Time: 13:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="true" %>
<html>
<head>
    <title>订单列表</title>
    <%@include file="/common/header.jsp"%>
</head>
<body>
<div id="root">
    <Collapse value="1">
        <Panel name="1">
            条件查询
            <p slot="content">
                <i-form :label-width="60" inline>
                    <Form-Item label="订单编号">
                        <i-input v-model="orderVo.orderSn"></i-input>
                    </Form-Item>
                    <Form-Item label="订单状态">
                        <i-Select v-model="orderVo.status" clearable  style="width: 120px;">
                            <i-Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</i-Option>
                        </i-Select>
                    </Form-Item>
                    <Form-Item label="支付方式">
                        <i-Select v-model="orderVo.payType" clearable  style="width: 120px;">
                            <i-Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</i-Option>
                        </i-Select>
                    </Form-Item>
                    <Form-Item label="提交时间">
                        <Date-Picker type="date" placeholder="起始时间" style="width: 200px" v-model="orderVo.stime"></Date-Picker>
                        <Date-Picker type="date" placeholder="截止时间" style="width: 200px" v-model="orderVo.etime"></Date-Picker>
                    </Form-Item>
                    <i-button type="primary" @click="pageNo=1;getList();">搜索</i-button>
                </i-form>
            </p>
        </Panel>
    </Collapse>
    <Card style="margin: 20px 0" >

        <Icon type="ios-film-outline"></Icon>
        数据列表
    </Card>
    <i-table :columns="columns" :data="data" @on-selection-change="tableSelect=arguments[0]" border stripe height="300">
        <template slot-scope="scope" slot="payType">{{ scope.row.payType === 0 ? '未支付' : (scope.row.payType === 1 ? '支付宝' : '微信') }}</template>
        <template slot-scope="scope" slot="source">{{ scope.row.sourceType === 1 ? 'APP' : 'PC' }}</template>
        <template slot-scope="scope" slot="status">{{ scope.row.status === 0 ? '待付款' : (scope.row.status === 1 ? '待发货' : (scope.row.status === 2 ? '已发货' : (scope.row.status === 3 ? '已完成':'已关闭' ))) }}</template>
        <template slot-scope="{row,index}" slot="action">
            <i-Button type="info" size="large" @click="view(row)">查看</i-Button>
        </template>
    </i-table>
    <%--<i-button type="default" @click="pdel" style="margin-left: 20px;margin-top: 20px">批量删除</i-button>--%>
    <template>
        <Page :total="total1"
              show-elevator
              :page-size="pageSize"
              :current.sync="pageNo"
              show-total
              show-sizer
              :page-size-opts="[5,10,15,20]"
              style="margin-left: 30%;"
              @on-page-size-change="pageSize=arguments[0];getList();"
              @on-change="getList"/>
    </template>
</div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            columns:[

                {title:"订单编号",key:"orderSn"},
                {title:"提交时间",key:"createTime"},
                {title:"订单金额",key:"totalAmount"},
                {title:"支付方式",slot:"payType"},
                {title:"订单来源",slot:"source"},
                {title:"订单状态",slot:"status"},
                {title:"操作",slot:"action"},
            ],
            data: [],
            cityList: [
                {
                    value: '0',
                    label: '未支付'
                },
                {
                    value: '1',
                    label: '支付宝'
                },
                {
                    value: '2',
                    label: '微信'
                },
            ],
            statusList:[
                {
                    value: '0',
                    label: '待付款'
                },
                {
                    value: '1',
                    label: '待发货'
                },
                {
                    value: '2',
                    label: '已发货'
                },
                {
                    value: '3',
                    label: '已完成'
                },
                {
                    value: '4',
                    label: '已关闭'
                },
            ],
            orderVo:{},
            total1:{},
            pageSize:5,
            pageNo:1,
            tableSelect:[]
        },
        mounted(){
            this.getList();
        },
        methods: {
            getList(){
                axios.post(`/ord/order/list/${this.pageSize}/${this.pageNo}`,this.orderVo).then(
                    ({data})=>{
                        this.data=data.result.list;
                        this.total1 = data.result.total;
                    }
                )
            },
            getOrderList(){
                axios.post("/ord/order/orderList").then(
                    ({data})=>{
                        this.data=data.result;
                    }
                )
            },
            view(row){
                window.location.href="/ord/order/view?id="+row.id;
            },
            add(){
                window.location.href="/ord/order/orderadd";
            }
            <%--批量删除--%>
            <%--pdel(){--%>
                <%--if(this.tableSelect.length==0){--%>
                    <%--iview.Modal.confirm({--%>
                        <%--title:"信息提示",--%>
                        <%--content:"请选择删除对象！"--%>
                    <%--})--%>
                    <%--return;--%>
                <%--}--%>
                <%--let _this = this;--%>
                <%--let a = this.tableSelect.map(node=>"id="+node.id).join("&");--%>
                <%--iview.Modal.confirm({--%>
                    <%--title:"您确定要删除吗？",--%>
                    <%--content:"此操作是不可逆的",--%>
                    <%--onOk(){--%>
                        <%--axios.get(`/ord/order/pdel?${a}`).then(--%>
                            <%--({data})=>{--%>
                                <%--iview.Message.success({content:data.msg});--%>
                                <%--_this.getList();--%>
                                <%--_this.tableSelect=[]--%>
                            <%--}--%>
                        <%--)--%>
                    <%--},--%>
                    <%--onCancel(){--%>
                        <%--iview.Message.info("取消")--%>
                    <%--}--%>
                <%--})--%>
            <%--}--%>

        }
    })
</script>
</html>
